<template>
	<view class="ketx">
		<headertop title="可提现" str1="oridei" :back1="back1"></headertop>
		<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11732@2x(1).png" class="ketxback"
			mode="widthFix"></image>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="txnum">
			<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11887@2x.png" class="txnumback"
				mode=""></image>
			<view class="txline">
				<view class="left">
					<view class="ktxje">
						可提现金额(元)
					</view>
					<view class="numje">
						{{tixiancontent['amount']}}
					</view>
				</view>
				<view class="rightbtn" @click="gopage('提现')">
					提现
				</view>
			</view>
		</view>
		<view class="txrecord">
			<view class="cc">
				<view class="titlel">
					<view class="sk">

					</view>
					<span>提现记录</span>
				</view>
				<view class="statustabs">
					<view :class="query['type']==0?'itemstaus activeColor':'itemstaus'" @click="qiehuan(0)">
						<span>全部</span>
						<view class="activebox" v-if="query['type']==0">

						</view>
					</view>
					<view class="itemstaus" :class="query['type']==1?'itemstaus activeColor':'itemstaus'"
						@click="qiehuan(1)">
						<span>待审核</span>
						<view class="activebox" v-if="query['type']==1">

						</view>
					</view>
					<view class="itemstaus" :class="query['type']==2?'itemstaus activeColor':'itemstaus'"
						@click="qiehuan(2)">
						<span>打款中</span>
						<view class="activebox" v-if="query['type']==2">

						</view>
					</view>
					<view class="itemstaus" :class="query['type']==3?'itemstaus activeColor':'itemstaus'"
						@click="qiehuan(3)">
						<span>拒绝</span>
						<view class="activebox" v-if="query['type']==3">

						</view>
					</view>
					<view class="itemstaus" :class="query['type']==4?'itemstaus activeColor':'itemstaus'"
						@click="qiehuan(4)">
						<span>已打款</span>
						<view class="activebox" v-if="query['type']==4">

						</view>
					</view>
				</view>
				<view class="contents">
					<view class="msgicon" v-if="!list.length">
						<image :src="_static('https://jingwei.xunfuzhifuzaixian.com/static/images/wxnone.png')"
							mode="widthFix">
						</image>
						<view class="msgtext">
							暂无内容
						</view>
					</view>
					<view class="itemtxbox" v-for="item in list" :key="item.id">
						<view class="itemtx">
							<view class="ll">
								<view class="t1">
									<view class="dshbox">
										{{statustext(item['status'])}}
									</view>
									<view class="tt">
										提现
									</view>
								</view>
								<view class="t2time">
									{{item['createtime']}}
								</view>
							</view>
							<view class="rightsz">
								{{item['money']}}元
							</view>
						</view>
						<view class="line" v-if="statustext(item['status'])=='拒绝'&&item.reason">
							<view class="leftbox">
								<view class="tt">
									<span>拒绝原因：<span
											style="font-size: 24rpx;color: #86909C;">{{item.reason}}</span></span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		_static
	} from '@/ulm/utils/url.js'
	import headertop from '@/components/header.vue'
	import {
		$api
	} from '../../ulm';
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const back1 = ref('')
	const barHeight = ref('')
	const total = ref(0)
	const statusBarHeight = ref('')
	const tixiancontent = ref({})
	const list = ref([])
	const query = reactive({
		page: 1,
		limit: 10,
		type: 0
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onShow(() => {
		list.value = []
		query.page = 1
		init()
	})

	function qiehuan(num) {
		query['type'] = num
		query['page'] = 1
		list.value = []
		init()

	}

	function statustext(num) {
		if (num == 0) {
			return '待审核'
		} else if (num == 1) {
			return '打款中'
		} else if (num == 2) {
			return '拒绝'
		} else if (num == 3) {
			return '已打款'
		}
	}
	onReachBottom(() => {
		if (total.value > list.value.length) {
			query['page']++
			init()
		}
	})
	async function init() {
		const res = await $api.txlog(query)
		if (res.code == 1) {
			tixiancontent.value = res.data
			total.value = res.data.count
			list.value.push(...res.data.list)
		}
	}

	function gopage() {
		uni.navigateTo({
			url: '/sub_me/index/tixian'
		})
	}
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.activeColor {
		color: #13A2E6 !important;
	}

	.ketx {
		width: 100%;
		position: relative;
		overflow: hidden;

		.ketxback {
			width: 100%;
			position: absolute;
			z-index: -1;
		}

		.txrecord {
			width: 100%;
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 9%, #FFFFFF 100%);
			box-shadow: 0rpx -4rpx 13rpx 0rpx rgba(49, 183, 248, 0.37);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: -128rpx;

			.cc {
				width: 686rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 32rpx;

				.contents {
					width: 100%;
					margin-top: 48rpx;
					overflow: hidden;

					.itemtxbox {
						width: 686rpx;
						background: #F7F8FA;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						overflow: hidden;
						margin-bottom: 28rpx;

						.line {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20rpx;

							.rightnum1 {
								font-family: PingFang SC, PingFang SC;
								font-size: 24rpx;
								color: #86909C;
								width: 400rpx;
								text-align: right;
								word-wrap: break-word;
								margin-right: 32rpx;
							}

							.leftbox {
								margin-left: 32rpx;
								width: 100%;


								.tt {
									width: 95%;
									display: flex;
									align-items: center;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #1D2129;

									.bsbox {
										width: 88rpx;
										height: 40rpx;
										background: #FFF7E8;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
										margin-right: 4rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 24rpx;
										color: #FF7D00;
										text-align: center;
										line-height: 40rpx;
									}
								}
							}

						}

						.itemtx {
							width: 686rpx;
							height: 142rpx;

							display: flex;
							align-items: center;
							justify-content: space-between;

							.rightsz {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 36rpx;
								color: #FF7D00;
								margin-right: 32rpx;
							}

							.ll {
								margin-left: 32rpx;

								.t1 {
									display: flex;
									align-items: center;

									.dshbox {
										width: 96rpx;
										height: 40rpx;
										background: #13A2E6;
										border-radius: 8rpx 8rpx 8rpx 8rpx;
										text-align: center;
										line-height: 40rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 24rpx;
										color: #FFFFFF;
									}

									.tt {
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 32rpx;
										color: #1D2129;
										margin-left: 16rpx;
									}
								}

								.t2time {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: #4E5969;
									margin-top: 18rpx;
								}
							}
						}
					}

				}

				.statustabs {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 36rpx;

					.itemstaus {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #4E5969;
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;



						.activebox {
							position: absolute;
							width: 48rpx;
							height: 4rpx;
							bottom: -18rpx;
							background: #13A2E6;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
						}
					}
				}

				.titlel {
					width: 100%;
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #1D2129;

					.sk {
						width: 4rpx;
						height: 32rpx;
						background: #2AB4F5;
						border-radius: 0rpx 8rpx 8rpx 0rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

		.txnum {
			width: 686rpx;
			margin: auto;
			margin-top: 28rpx;
			height: 390rpx;
			position: relative;
			overflow: hidden;

			.txnumback {
				position: absolute;
				z-index: -1;
				width: 686rpx;
				height: 390rpx;
			}

			.txline {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 78rpx;
				justify-content: space-between;

				.rightbtn {
					width: 154rpx;
					height: 58rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 4rpx 0rpx #21A8EA;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					text-align: center;
					line-height: 58rpx;
					margin-right: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #2AB4F5;
				}

				.left {
					margin-left: 36rpx;

					.ktxje {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.numje {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 56rpx;
						color: #FFFFFF;
						margin-top: 32rpx;
					}
				}

			}
		}
	}
</style>